<template>
    <!--订单查询-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('pageTitle.loanSucOrderSearch') }}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="orderId" label="">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')"
                                clearable></el-input><!--内部订单号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userId" label="">
                            <el-input v-model="form.userId" placeholder="User ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName"
                                :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userPhone" label="">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userName" label="">
                            <el-input v-model="form.userName" :placeholder="$t('common.name')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="controlNumber" label="">
                            <el-input v-model="form.controlNumber" :placeholder="$t('common.repaySerialNumber')"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-button @click="search" type="primary" icon="el-icon-search">{{ $t('common.search')
                        }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight"
                        :highlight-current-row="true">
                        <el-table-column prop="userId" label="User Id" width="100"></el-table-column>
                        <el-table-column prop="orderId" width="200"
                            :label="$t('common.innerOrderId')"></el-table-column><!--内部订单号-->
                        <el-table-column prop="userId" label="User Id" width="100"></el-table-column>
                        <el-table-column prop="userName" :label="$t('common.name')" width="130"></el-table-column><!--姓名-->
                        <el-table-column prop="userPhone" :label="$t('common.mobileNumber')"
                            width="150"></el-table-column><!--手机号-->
                        <el-table-column align="left" :label="$t('system.appName')" prop="appName"
                            width="160"></el-table-column><!--APP名称-->
                        <el-table-column prop="contractAmount" :label="$t('common.contractAmount')" width="150"><!--合同金额-->
                            <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.borrowAmount')" prop="loanAmount" min-width="120"><!--借款金额-->
                            <template slot-scope="{ row }">{{ row.loanAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.loanType')" prop="payChannel" min-width="180"><!--放款方式-->
                            <template slot-scope="{ row }">{{ row.payChannel | SwitchLoanChannel }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.loanSerialNumber')" prop="controlNumber"
                            width="120"><!--放款序列号-->
                            <template slot-scope="{ row }">
                                <el-button :disabled="!showControlNumber" type="text"
                                    @click="checkControlNumber(row.orderId)">{{ $t('common.check') }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('common.loanVoucher')"><!--放款凭证-->
                            <template slot-scope="{ row }">
                                <el-button @click="changeVoucherVisible(row)" type="text">{{ $t('common.check') }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('common.repaySerialNumber')" prop="contractNumber"
                            min-width="120"></el-table-column><!--还款序列号-->
                        <el-table-column prop="applyTime" width="180" :label="$t('common.applyDate')"><!--申请日期-->
                            <template slot-scope="scope">{{ scope.row.applyTime | formatDate('yyyy-MM-dd hh:mm:ss')
                            }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.loanCompleteTime')" prop="loanCompletionTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.loanCompletionTime | formatDate('yyyy-MM-dd hh: mm: ss')}}</template><!--放款完成时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.cashWithdrawalTime')" prop="withdrawTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.withdrawTime | formatDate('yyyy-MM-dd hh:mm:ss')
                            }}</template><!--取现时间-->
                        </el-table-column>
                        <!--订单状态-->
                        <!-- <el-table-column prop="status" :label="$t('common.orderStatus')" min-width="150">
                            <template slot-scope="scope">{{ scope.row.status | switchOrderStatus }}</template>
                        </el-table-column> -->
                        <el-table-column prop="refundStatus" :label="$t('common.refundStatus')" min-width="170">
                            <template slot-scope="{ row }">
                                <el-button type="text" @click="showRefundDetails(row.orderId)">{{ row.refundStatus |
                                    switchRefundStatus }}</el-button>
                            </template>
                        </el-table-column><!---->
                        <el-table-column prop="restRepay" :label="$t('common.restRepay')" min-width="150">
                            <template slot-scope="scope">{{ scope.row.restRepay | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column prop="payedAmount" :label="$t('common.hasRepayAmount')" min-width="150">
                            <template slot-scope="scope">{{ scope.row.payedAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column fixed="left" :label="$t('common.operation')" width="200">
                            <template slot-scope="scope">
                                <el-button :disabled="!scope.row.settleBillFlag" @click="ledgerClick(scope.row)" type="text"
                                    size="small">{{ $t('finance.ledger') }}</el-button>
                                <el-button type="text" @click="reunderClick(scope.row)"
                                    :disabled="!((scope.row.payChannel == 1 || scope.row.payChannel == 9) && (!scope.row.withdrawTime || scope.row.withdrawTime == ''))"
                                    size="small">{{ $t('finance.returnHandler') }}</el-button>
                                <el-button type="text" @click="editClick(scope.row)"
                                    :disabled="!((scope.row.payChannel == 1 || scope.row.payChannel == 9) && (!scope.row.withdrawTime || scope.row.withdrawTime == ''))"
                                    size="small">{{ $t('common.editName') }}</el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>
        <!--放款序列号弹框start-->
        <alert-dialog :title="$t('common.loanSerialNumber')" class="applyDialog" width="430px" :visible.sync="controlNumberDialog" :dialogPosition="'center'">
            <div class="main">
                <el-row >
                    <el-col :span="8">{{$t('common.loanSerialNumber')}} ：</el-col>
                    <el-col :span="10">{{this.controlNumber}}</el-col>
                </el-row>
            </div>
        </alert-dialog>
        <!--放款序列号弹框end-->
        <EditName ref="EditName" @EditSuc="getTableData()" />
        <ReunderMoney ref="ReunderMoney" @ReunderSuc="getTableData()" />
        <BalanceAccounts ref="BalanceAccounts" @ledgerSucc="getTableData()" />
        <!-- 放款凭证 -->
        <downVouncherModal :visible.sync="voucherVisible" :orderId="orderId"/>
    </div>
</template>

<script>
import mixin from '@/service/mixin';
import Pagination from '@/components/pagination';
import alertDialog from '@/components/alert-dialog';
import SelectAppList from '@/components/select-app-list';
import BalanceAccounts from './components/balanceAccounts.vue';
import ReunderMoney from './components/reunderMoney.vue';
import EditName from './components/editName';
import downVouncherModal from '@/components/down-vouncher-modal.vue'
let that = null;
export default {
    name: 'system-order-search',
    components: {
        Pagination,
        alertDialog,
        SelectAppList,
        BalanceAccounts,
        ReunderMoney,
        EditName,
        downVouncherModal
    },
    mixins: [mixin],
    data() {
        var checkControl = (rule,value, callback) => {
            if(value==''){
                callback()
            }else if(!(value.indexOf('SKYAX')==0||value.indexOf('SKYN')==0||value.indexOf('PSP')==0)){
               callback(new Error(`${this.$t('common.plsInputRightControl')}`));
            }else{
                callback()
            }
           
        };
        return {
            form: {
                orderId: '',
                userId: '',
                appName: '',
                userPhone: '',
                userName: '',
                controlNumber: ''
            },
            controlNumberDialog: false,
            controlNumber: '',
            refundDetailsDialog: false,
            refundData: [],
            rules: {
                userId: [
                    { pattern: /^\d+$/, message: this.$t('verify.plsInputNumber') },
                ],
                orderId: [
                    { pattern: /^\d+$/, message: this.$t('verify.plsInputNumber') },
                ],
                userPhone: [
                    { pattern: /^\d+$/, message: this.$t('verify.plsInputNumber') },
                ],
                controlNumber: [
                    { validator: checkControl,trigger: 'blur', message: this.$t('common.plsInputRightControl') },
                ]
            },
            voucherVisible: false,
            orderId: null
        };
    },
    computed: {
        showControlNumber() {
            // 查看放款序列号权限
            return this.$store.getters.checkUserAuthority('customerService.systemOrderSearch.showControlNumber');
        },
    },
    methods: {
        changeVoucherVisible (row) {
            this.orderId = row.orderId
            this.voucherVisible = true
        },
        ledgerClick(row) {
            console.warn(row)
            this.$refs.BalanceAccounts.showBalance(row);
        },
        reunderClick(row) {
            this.$refs.ReunderMoney.showReunder(row);


        },
        editClick(row) {
            this.$refs.EditName.showEdit(row);
        },
        // 获取列表数据
        getTableData(page = this.page) {
            const params = this.fillParams(page);
            this.$api.systemOrder.queryFianceOrder(params).then(res => {
                const { status, data, error } = res;
                if ('1' === status && '00000000' === error && data) {
                    this.tableData = data.resultData;
                    this.setPage(data.page, this.page);
                }
                this.tableMaxHeight = document.body.clientHeight - 265;
            });
        },
        // 搜索列表数据
        search() {
            this.$refs.form.validate(val => {
                console.warn(val)
                if (val) {
                    const form = this.form;
                    if (!form.orderId && !form.userId && !form.userName && !form.userPhone && !form.controlNumber) {
                        this.$message.warning(this.$t('verify.plsCheckSearch'));
                        return;
                    }
                    this.page.currentPage = 1;
                    this.getTableData();
                }
            });
        },
        // 配置查询和导出参数
        fillParams(page = this.page) {
            const form = this.form;
            const params = {
                orderId: '',
                userId: '',
                appName: '',
                userPhone: '',
                userName: '',
                controlNumber: '',
                page: {
                    pageNo: page.currentPage,
                    pageSize: this.page.pageSize
                }
            };
            Object.keys(form).forEach(key => {
                if (typeof form[key] === 'string' && form[key]) {
                    form[key] = form[key].trim();
                    params[key] = form[key];
                }
            });
            return params;
        },
        // 查看还款序列号
        checkControlNumber(orderId) {
            this.controlNumber = '';
            this.controlNumberDialog = true;
            this.$api.systemOrder.queryControlNumber({ orderId: orderId }).then(res => {
                const { status, data, error } = res;
                if ('1' === status && '00000000' === error && data) {
                    this.controlNumber = data.controlNumber || '';
                }
            });
        },
        showRefundDetails(orderId) {
            this.refundData = [];
            this.$api.finance.refund.queryAllRefundInfoByOrderId({ orderId: orderId }).then(res => {
                const { status, data, error } = res;
                if ('1' === status && '00000000' === error && data) {
                    this.refundData = data;
                    this.refundDetailsDialog = true;
                }
            });
        }
    },
    filters: {
        switchOrderStatus(status) {
            switch (status + '') {
                case '0':
                    return that.$t('common.unProcessed'); //未处理
                case '1':
                    return that.$t('audit.auditing');//信审中
                case '2':
                    return that.$t('audit.auditSuccess');//信审通过
                case '3':
                    return that.$t('audit.auditRefuse');//信审拒绝
                case '4':
                    return that.$t('pageTitle.telVerifying');//电核中
                case '5':
                    return that.$t('pageTitle.telPass');//电核通过
                case '6':
                    return that.$t('pageTitle.telRefuse');//电核拒绝
                case '7':
                    return that.$t('common.loaning');//放款中
                case '8':
                    return that.$t('common.loanSuccess');//放款成功
                case '9':
                    return that.$t('common.loanRefused');//放款拒绝
                case '10':
                    return that.$t('common.overdueNotRepay');//逾期未还
                case '11':
                    return that.$t('finance.repaySuccess');//还款成功
                default:
                    return '';
            }
        },
        switchRefundStatus(status) {
            switch (status + '') {
                case '1':
                    return that.$t('common.waitRefund');//待退款
                case '2':
                    return that.$t('common.refunding');//退款中
                case '3':
                    return that.$t('common.refundfailed');//退款失败
                case '4':
                    return that.$t('common.refundRefuse');//退款拒绝
                case '5':
                    return that.$t('common.refundSuccess');//退款成功
                default:
                    return '';
            }
        }
    },
    created() {
        that = this;
        // this.getTableData({currentPage: this.page.currentPage}, this.form);
    },
};
</script>

<style lang="scss">
[data-page=system-order-search] {
    .module_form {
        padding-bottom: 20px;
    }

    .noteRed {
        color: red;
    }

    .el-col {
        padding-left: 10px;
    }

    .el-table .cell,
    .el-table th>.cell {
        word-break: keep-all;
        word-wrap: break-word;
    }

    .el-tooltip__popper {
        max-width: 300px;
        word-break: break-all;
        background-color: #fff;
        box-shadow: 0px 0px 5px #ccc;
        color: #000;
    }

    .el-date-editor .el-range-separator {
        width: 35px;
    }

    .dialogContent {
        .el-row {
            margin-bottom: 5px;
        }

        .info {
            word-wrap: break-word;
        }
    }

    .line {
        margin: 10px 0;
        border-bottom: 1px solid #d4d7da;
    }
}</style>
